<template>
  <div class="pd-20">
    <!-- <div class="talking-tag">
      <div class="talking-tag__title">场景</div>
      <div class="talking-tag__sub-title">#点击对话框可复制文字内容#</div>
      <div>
        <div
          class="talking-tag__content"
          v-for="tab in conversations.tabs"
          :key="tab"
        >
          <span class="talking-tag__content_title">{{ tab }}</span>
          <div
            class="tab-content"
            v-for="(content, i) in conversations.contents[tab]"
            :key="i"
          >
            <div
              v-if="!isEven(`${i + 1}`)"
              class="text-left"
              @click="copyWord(content)"
            >
              {{ content }}
            </div>
            <div v-else class="text-right" @click="copyWord(content)">
              {{ content }}
            </div>
          </div>
        </div>
      </div>
    </div> -->
    <section>
      <div class="van-block" v-for="(item, i) in topics" :key="i">
        <div class="van-block__title">{{ item.name }}</div>
        <div class="van-block__tabs">
          <div
            class="van-block__tabs_tab"
            type="primary"
            v-for="tab in item.menus"
            :key="tab"
          >
            <span @click="openDialog(tab)">{{ tab }}</span>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { topics } from "../data/data";
import { copyWord } from "../utils/copy";

export default {
  data() {
    return {
      topics,
      contents: {
        // ...scenes1,
      },
    };
  },
  computed: {
    conversations() {
      const tabs = Object.keys(this.contents);
      const contents = this.contents;
      return {
        tabs,
        contents,
      };
    },
  },
  methods: {
    openDialog(tab) {
      this.$router.push({ name: "TagDetail", query: { topic: tab } });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>